import "./index.css";

import { useEffect, useState } from "react";

import Indicator from "../Components/Indicator";
import pokeService from "../services/poke";

const { berries, contests, games } = pokeService;

const InfoItem = ({ title, value }) => {
  return (
    <div className="InfoItemContainer">
      <div className="title">{title}</div>
      <div className="value">
        {typeof value === ("string" || "number")
          ? value
          : JSON.stringify(value)}
      </div>
    </div>
  );
};

const Loading = ({ size }) => {
  const style = {
    width: size,
    height: size,
  };
  return (
    <div className="indicatorContainer" style={style}>
      <Indicator />
    </div>
  );
};

const Changer = ({ value, prev, next, loading = true }) => {
  return (
    <div className="ChangerContainer">
      <button className="BtnPrev" disabled={!(value - 1)} onClick={prev}>
        {!!(value - 1) && loading && <Loading size={20} />}
        Previous
      </button>
      <div className="ChangerValue">{value}</div>
      <button className="BtnNext" onClick={next}>
        {loading && <Loading size={20} />}
        Next
      </button>
    </div>
  );
};

const Berries = () => {
  const [data, setData] = useState({});
  const [key, setKey] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    let ignore = false;

    setLoading(true);
    berries
      .getBerries(key)
      .then((res) => {
        if (!ignore) {
          console.log(111, res);
          setData(res);
        }
      })
      .catch((err) => {
        console.log("err: ", err);
      })
      .finally(() => {
        setTimeout(() => {
          setLoading(false);
        }, 1000);
      });

    return () => {
      ignore = true;
    };
  }, [key]);

  return (
    <>
      <div className="container">
        <h3>Berries</h3>
        <Changer
          value={key}
          prev={() => setKey(key - 1)}
          next={() => setKey(-1)}
          loading={loading}
        />
        {Object.keys(data).map((item) => {
          return <InfoItem key={item} title={item} value={data[item]} />;
        })}
      </div>
    </>
  );
};

const Contests = () => {
  const [data, setData] = useState({});
  const [key, setKey] = useState(1);

  useEffect(() => {
    contests.getContestType(key).then((res) => {
      setData(res);
    });
  }, [key]);
  return (
    <>
      <div className="container">
        <h3>Contests</h3>
        {Object.keys(data).map((item) => {
          return <InfoItem key={item} title={item} value={data[item]} />;
        })}
      </div>
    </>
  );
};

const Games = () => {
  const [data, setData] = useState({});
  const [key, setKey] = useState(1);

  useEffect(() => {
    games.generations(key).then((res) => {
      setData(res);
    });
  }, [key]);

  return (
    <>
      <div className="container">
        <h3>Games</h3>
        {Object.keys(data).map((item) => {
          return <InfoItem key={item} title={item} value={data[item]} />;
        })}
      </div>
    </>
  );
};

const Demo8 = () => {
  return (
    <div className="ProviderContainer BrownBorder Demo8Container">
      <h2>Poke API: https://pokeapi.co/</h2>
      <Berries />
      <Contests />
      <Games />
    </div>
  );
};

export default Demo8;
